<template>
  <div class="file-view-single">
    <el-image v-if="src" :src="url" @error="e => e.target.src = '/error.png'"  :preview-src-list="[url]"/>
    <el-image v-else src="/error.png"/>
  </div>
</template>

<script>
const API_HOST = process.env.VUE_APP_BASE_API
const NGINX_HOST = ''

export default {
  name: 'file-view-single',
  cnName: 'file-view-single',
  props: {
    src: String,
    isNginx: { // 使用服务器Nginx的代理
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      base: API_HOST
    }
  },
  methods: {},
  computed: {
    url() {
      if(this.src && this.src.indexOf('http') === 0) {
        return this.src
      }
      if(!this.isNginx) {
        return this.base + this.src
      }
      return NGINX_HOST + this.src
    }
  }
}
</script>

<style lang="scss" scoped>
.file-view-single {
  display: inline-block;
  margin-top: 10px;

  ::v-deep {
    .el-image {
      height: 40px;
    }
    .el-image__error, .el-image__inner, .el-image__placeholder {
      max-width: 100%;
      max-height: 100%;
      object-fit: cover;
    }
  }
}
</style>
